<template>
  <div class="single">
    <div class="container">
      <!----top-header---->
      <div class="top-header">
        <!-- <div class="clearfix"> </div> -->
      </div>
      <!---导航菜单---->
      <div class="top-header-nav">
        <nav class="top-nav main-menu">
          <ul class="top-nav">
            <li><a href="#">首页</a><span> </span></li>
            <li><a href="#">产品</a><span> </span></li>
            <li><a href="#">服务</a><span> </span></li>
            <li><a href="#">品牌</a><span> </span></li>
            <li><a href="#">关于我们</a></li>
            <div class="clearfix"></div>
          </ul>
          <a href="#" id="pull"
            ><img src="../../images/nav-icon.png" title="menu"
          /></a>
        </nav>
        <!---搜索--->
        <div class="top-header-search-box">
          <!-- <form @submit.native.prevent> -->
          <!-- required要求不能为空 maxlength限制输入长度 -->
          <input type="text" required maxlength="22" />
          <input type="submit" value=" " />
          <!-- </form> -->
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <!--筛选-->
    <div class="content">
      <div class="container">
        <!-- 筛选 -->
        <div class="products">
          <div class="product-filter">
            <h1><a href="#">收货地址</a></h1>
            <div class="product-filter-grids">
              <!-- 引用element-ui -->
              <el-container>
                <!-- 头部 -->
                <el-header>收货地址管理</el-header>
                <!-- 地址信息 -->
                <el-main>
                  <div class="grid">
                    <div>
                      <div class="book">
                        <div>
                          <label for="id">编号：</label>
                          <input
                            type="text"
                            id="id"
                            v-model="id"
                            :disabled="flag"
                          />
                          <label for="name">姓名：</label>
                          <input type="text" id="name" v-model="name" />
                          <label for="address">地址：</label>
                          <input type="text" id="address" v-model="address" />
                          <button @click="handle" :disabled="submitFlag">
                            添加
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="total">
                      <span>地址总数：</span>
                      <span>{{ total }}</span>
                    </div>

                    <table>
                      <thead>
                        <tr>
                          <th>编号</th>
                          <th>姓名</th>
                          <th>地址</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr :key="item.id" v-for="item in books">
                          <td>{{ item.id }}</td>
                          <td>{{ item.name }}</td>
                          <td>{{ item.address }}</td>
                          <td>
                            <!-- @click.prevent阻止默认的href跳转行为 -->
                            <a href="" @click.prevent="toEdit(item.id)">修改</a>
                            <span>|</span>
                            <a href="" @click.prevent="deleteBook(item.id)"
                              >删除</a
                            >
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </el-main>
                <!-- //地址信息 -->
              </el-container>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 地址数据
      flag: false,
      submitFlag: false,
      id: "",
      name: "",
      address: "",
      books: [
        {
          id: 1,
          name: "张三",
          address: "广东省广州市增城区",
        },
        {
          id: 2,
          name: "李四",
          address: "广东省广州市黄埔区",
        },
        {
          id: 3,
          name: "王五",
          address: "广东省广州市白云区",
        },
        {
          id: 4,
          name: "赵六",
          address: "广东省广州市越秀区",
        },
      ],
    };
  },
  methods: {
    handle() {
      if (this.flag) {
        //编辑

        //方式二：正常遍历
        this.books.forEach((item, index) => {
          if (item.id == this.id) {
            item.name = this.name;
          }
        });
        // 修改后，让id可以编辑
        this.flag = false;
      } else {
        //添加
        var book = {};
        book.id = this.id;
        book.name = this.name;
        book.address = this.address;
        this.books.push(book);
      }
      // 添加后清空输入框内容
      this.id = "";
      this.name = "";
    },
    toEdit(id) {
      console.log(id);
      this.flag = true;

      //通过id查找出对应的数据信息
      //方式一：通过数组内置的API：filter过滤，其参数是一个过滤条件
      var book = this.books.filter(function (item) {
        return item.id == id;
      });
      this.id = book[0].id;
      this.name = book[0].name;
    },
    deleteBook(id) {
      // 根据id查找数组中的索引
      var index = this.books.findIndex(function (item) {
        return item.id == id;
      });
      // 根据索引删除数组元素，p1:索引，p2:个数
      this.books.splice(index, 1);
    },
  },
  computed: {
    total() {
      return this.books.length;
    },
  },
  watch: {
    name(val) {
      // 验证图书名称是否已经存在
      // 此API接口，用来判断数组中有没有元素，如果有返回true，反之返回false
      var flag = this.books.some(function (item) {
        // reutrn 判断条件
        return item.name == val;
      });
      if (flag) {
        // 图书名称存在
        this.submitFlag = true;
      } else {
        // 图书名称不存在
        this.submitFlag = false;
      }
    },
  },
};
</script>

<style scoped>
@import "../../css/style.css";
@import "../../css/bootstrap.css";
/* element-ui布局 */
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
/* 增删改查css */
.grid {
  margin: auto;
  width: 100%;
  text-align: center;
}
.grid table {
  width: 100%;
  border-collapse: collapse;
}
.grid th,
td {
  padding: 10;
  border: 1px dashed orange;
  height: 50px;
  line-height: 35px;
}
.grid th {
  background-color: orange;
}
/* 添加输入框样式 */
.grid .book {
  line-height: 30px;
  padding-bottom: 10px;
  padding-top: 5px;
  background-color: #f3dcab;
}
.grid .total {
  height: 30px;
  line-height: 30px;
  background-color: #f3dcab;
  border-top: 1px solid #c2d89a;
}
</style>